import QtQuick 2.11
import FluentUI

/** EMGradeChart
  *  封装业务系统中用于渲染交互式表格的组建
  *  外部调用需要设置width, height
  *  设置渲染数据的时候调用 对象.setChartData传递
  */


Item {
    FluChart{
        id: gradeChart
        width: parent.width
        height: parent.height
        chartType: "doughnut"
        chartData: {
            return {
                labels: [
                    '0',
                    '1',
                    '2',
                    '3',
                    '4'
                ],
                datasets: [{
                        label: 'My First Dataset',
                        data: [1, 1, 1, 1, 1],
                        backgroundColor: [
                            'rgb(255, 99, 132)',
                            'rgb(54, 162, 235)',
                            'rgb(255, 205, 86)',
                            'rgb(255, 0, 86)',
                            'rgb(255, 205, 255)'
                        ],
                        hoverOffset: 4
                    }]
            }
        }
        chartOptions: {
            return {
                maintainAspectRatio: false,
                title: {
                    display: true,
                    text: 'Class Possible'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                }
            }
        }
    }

    function setChartData(dataArray){
        if(dataArray.length < 5){
            while(dataArray.length < 5){
                dataArray.push(0)
            }
        }else{
            dataArray = dataArray.slice(0, 5)
        }

        gradeChart.chartData = {
            labels: [
                '0',
                '1',
                '2',
                '3',
                '4'
            ],
            datasets: [{
                    label: 'My First Dataset',
                    data: dataArray,
                    backgroundColor: [
                        'rgb(255, 99, 132)',
                        'rgb(54, 162, 235)',
                        'rgb(255, 205, 86)',
                        'rgb(255, 0, 86)',
                        'rgb(255, 205, 255)'
                    ],
                    hoverOffset: 4
                }]
        }
    }
}

